<template>
  <a-modal
    centered
    :footer="null"
    :width="700"
    :closable="false"
    :title="video.title"
    v-model="visible"
    @cancel="destory"
  >
    <div class="player" @contextmenu.prevent="show">
      <video-player
        class="vjs-custom-skin"
        ref="videoPlayer"
        :controls="false"
        :options="options"
        @play="onPlay($event)"
        @pause="onPause($event)"
      >
      </video-player>
    </div>
    <div class="comment-wrapper">
      <a-list
        class="comment-list"
        :header="`${commentData.length} 条评论`"
        item-layout="horizontal"
        :data-source="commentData"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-comment :author="item.author" :avatar="item.avatar">
            <template slot="actions">
              <span v-for="(action,index) in item.actions" :key="index">{{ action }}</span>
            </template>
            <p slot="content">
              {{ item.content }}
            </p>
            <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
              <span>{{ item.datetime.fromNow() }}</span>
            </a-tooltip>
          </a-comment>
        </a-list-item>
      </a-list>
      <a-comment>
        <div slot="content">
          <a-form-item>
            <a-textarea :rows="4" :value="commentContent" />
          </a-form-item>
          <a-form-item>
            <a-button :loading="submitting" type="primary" @click="handleSubmit">
              评论
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
    </div>
  </a-modal>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import { getVideoClick, postVideoClick } from '@/api/video'
import 'video.js/dist/video-js.css'
import '@/assets/custom-theme.css'

export default {
  props: {
    video: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    videoPlayer
  },
  name: 'PlayerWrapper',
  data () {
    return {
      visible: false,
      options: {
        autoplay: true,
        preload: 'auto',
        fluid: true,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        notSupportedMessage: '此视频暂时无法播放',
        poster: '',
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          progressControl: false
        }
      },
      title: '',
      lastTime: 0,
      commentData: [
        // {
        //   author: 'Han Solo',
        //   avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        //   content:
        //     'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
        //   datetime: moment().subtract(1, 'days')
        // }
      ],
      commentContent: '',
      submitting: false
    }
  },
  created () {
    this.options.sources[0].src = this.video.url
    setTimeout(() => {
      getVideoClick(this.video.id).then(res => {
        this.visible = true
      })
    }, 300)
  },
  methods: {
    destory () {
      const app = this
      const vd = this.$refs.videoPlayer.player
      const data = {}
      app.$confirm({
        centered: true,
        title: '是否关闭正在播放的视频',
        onOk: () => {
          app.onPause()
          data['video[playtime]'] = Math.floor(vd.cache_.currentTime)
          postVideoClick(this.video.id, data).then(res => {
            app.options.sources[0].src = ''
            app.options.poster = ''
            app.visible = false
            app.$emit('cancel', app.visible)
          })
        },
        onCancel: () => {
          app.visible = true
          app.onPlay()
        }
      })
    },
    onPlay (player) {
      const mp = this.$refs.videoPlayer.player
      mp.play()
    },
    onPause (player) {
      const mp = this.$refs.videoPlayer.player
      mp.pause()
    },
    show () {
      this.$warning({
        title: '禁止保存视频'
      })
    },
    handleSubmit () {
    }
  }
}
</script>

<style scoped>
</style>
